/**
 * Created by shaotingzhou on 2017/5/11.
 */
// 歌曲简介 http://rapapi.org/mockjsdata/18730/songInfo    http://rapapi.org/mockjsdata/18730/user
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    ScrollView,
    Dimensions
} from 'react-native';

import Navigator from '../../../Main/navigator'
import Users from '../users/users'
var {width,height} = Dimensions.get('window');

export default class SongInfo extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            usersAry:[],
            id:'',
            title:'',
            singer:'',
            downloadCount:'',
            palyCount:'',
            wifi:'',
            threeG:'',
            experience:'',
            singerBirthday:'',
            singerImg:'sss',
            userDounloadCount:'',
            constellation:''
        };
    }
    render() {
        return (
            <View>
                {/*导航栏*/}
                <Navigator
                    centerText='歌曲简介'
                    leftSource={require('../../../image/返回.png')}
                    leftAction={() => this.leftAction()}
                    rightAction={() => this.rightAction()}
                />
                <ScrollView style={{height:height}}>
                    {/*歌曲 + 歌手*/}
                    <View style={{flexDirection:'row'}}>
                        <Image source={{uri:this.state.singerImg}} style={{width:100,height:100,borderRadius:50,marginTop:10,marginLeft:10}}/>
                        <View style={{marginLeft:20,justifyContent:'space-around'}}>
                            <Text style={{fontSize:20,fontWeight:'bold'}}>歌曲: {this.state.title}</Text>
                            <Text style={{fontSize:18}}>歌手: {this.state.singer}</Text>
                        </View>
                    </View>
                    <View style={{height:1,marginTop:10,backgroundColor:'#DEDEDE'}}></View>
                    {/*下载播放统计*/}
                    <View style={{marginTop:5,marginLeft:10}}>
                        <Text style={{fontSize:16,marginTop:5}}>下载统计:</Text>
                        <Text style={{fontSize:16,marginTop:5}}>总下载次数: {this.state.downloadCount}</Text>
                        <Text style={{fontSize:16,marginTop:5}}>wifi下载:{this.state.wifi}  3G网络下载:{this.state.threeG}</Text>
                        <Text style={{fontSize:16,marginTop:5}}>播放次数: {this.state.palyCount}</Text>
                    </View>
                    <View style={{height:1,marginTop:10,backgroundColor:'#DEDEDE'}}></View>
                    {/*用户下载*/}
                    <View style={{height:50,flexDirection:'row',alignItems:"center"}}>
                        <Text style={{marginRight:20,marginLeft:20}}>用户下载:{this.state.userDounloadCount}</Text>
                        <View style={{width:1,height:50,backgroundColor:'#DEDEDE'}}></View>
                        <ScrollView style={{height:50}} ref = "userScrollView">
                            {this.userItem()}
                        </ScrollView>
                        <TouchableOpacity onPress={()=>this.pushUsers()}>
                            <Image source={require('../../../image/右箭头.png')} style={{width:20,height:15,position:'absolute',right:10}} />
                        </TouchableOpacity>
                    </View>
                    <View style={{height:1,backgroundColor:'#DEDEDE'}}></View>
                    {/*歌手简介*/}
                    <View style={{marginLeft:10}}>
                        <Text style={{fontSize:16,marginTop:5}}>歌手简介:</Text>
                        <Text style={{fontSize:16,marginTop:5}}>生日:{this.state.singerBirthday}</Text>
                        <Text style={{fontSize:16,marginTop:5}}>星座:{this.state.constellation}</Text>
                        <Text style={{fontSize:16,marginTop:5}}>创作经历:</Text>
                        {this.renderItem()}
                        <Image source={require('../../../image/书籍.png')} style={{width:25,height:30,position:'absolute',right:20,top:30}} />
                    </View>
                </ScrollView>
            </View>
        );
    }

    leftAction =()=>{
        this.props.navigator.pop({})
    }

    rightAction =()=>{

    }

    componentDidMount(){
        let url = 'http://rapapi.org/mockjsdata/18730/songInfo'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    id:json.id,
                    title:json.title,
                    singer:json.singer,
                    downloadCount:json.downloadCount,
                    palyCount:json.palyCount,
                    wifi:json.wifi,
                    threeG:json.threeG,
                    experience:json.experience,
                    singerBirthday:json.singerBirthday,
                    singerImg:json.singerImg,
                    userDounloadCount:json.userDounloadCount,
                    constellation:json.constellation
                })
            })

        let url1 = 'http://rapapi.org/mockjsdata/18730/user'
        fetch(url1)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    usersAry:json.users
                })
            })

        let h = 50
        this.timer = setInterval(
            () => {
                this.refs.userScrollView.scrollTo({x: 0,y:h,animated:true})
                h+=50
                if(h == this.state.usersAry.length * 50){
                    h = 0
                }
            },
            2500
        );


    }

    renderItem = () =>{
        var itemAry = [];
        let txt = this.state.experience
        let ary = txt.split('+')
        for(var i = 0;i < ary.length; i++){
            itemAry.push(
                <Text key={i} > {ary[i]}</Text>
            )
        }

        return  itemAry;
    }

    userItem = () =>{
        var itemAry = [];
        let ary = this.state.usersAry

        for(var i = 0;i < ary.length; i++){
            itemAry.push(
                <View key={i} style={{height:50,justifyContent:'center'}}>
                    <Text style={{fontSize:18,marginLeft:5}}> {ary[i].name}</Text>
                </View>
            )
        }

        return  itemAry;
    }

    pushUsers = () =>{
       this.props.navigator.push({
           component:Users
       })
    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});